
<script>
export default {
  data() {
    return {
      radio: 1,
      value: '',
      show: false,
      payCode: '',
    }
  },
  watch:{

  },
  methods: {
    showPopup(){
      window.open(`http://localhost:9091/alipay/pay?payCode=${this.payCode}`)
    },
  },
  created() {
    this.payCode = this.$route.query.payCode;
  }
}
</script>

<template>
<div class="box">
  <div class="yi">
    <div><van-icon class="fan" name="arrow-left" /></div>
    <span class="fu">付款方式</span>
    <span class="jia">+</span>
  </div>
  <div>
    <p class="zhi">支付方式</p>
  </div>
  <div class="payment-option">
    <img src="https://img1.baidu.com/it/u=3165023803,2137666183&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="微信图标">
    <div class="payment-text">
      <span class="wei">微信支付</span>
      <span class="sub-text">微信</span>
    </div>
    <el-radio-group v-model="radio">
      <el-radio class="dan" :label="0" checked-color="3474FF"></el-radio>
    </el-radio-group>
  </div>
  <hr style="margin-top: 15px;width: 260px">
  <div class="payment-option1">
    <img src="https://q7.itc.cn/q_70/images03/20241111/8b6a53a12a58457d87ceea336014303d.jpeg  " alt="支付宝图标">
    <div class="payment-text">
      <span class="wei">支付宝支付</span>
      <span class="sub-text">支付宝</span>
    </div>

    <el-radio-group v-model="radio">
      <el-radio class="dan1" :label="1" checked-color="3474FF"></el-radio>
    </el-radio-group>
  </div>
  <hr style="margin-top: 15px;width: 260px">
  <!-- 密码输入框 -->

  <div>
    <p class="zhi">信用卡支付</p>
  </div>

  <div class="payment-option2">
    <img src="https://img2.baidu.com/it/u=302113575,3123122044&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="信用卡图标">
    <div class="payment-text">
      <span class="wei">招商银行</span>
      <span class="sub-text1">*******8930</span>
      <span class="sub-text1">王珊珊</span>
    </div>
    <el-radio-group v-model="radio" >
      <el-radio class="dan2" :label="2" checked-color="3474FF"></el-radio>
    </el-radio-group>
  </div>
  <hr style="margin-top: 15px;width: 260px">

  <button class="kuan" @click="showPopup">
    付款
  </button>
</div>
</template>

<style scoped>
.box{
  width: 390px;
  margin: 0 auto;
}
.fan{
  margin-top: 20px;
  float: left;
  margin-left: 20px;
  font-size: 20px;
}
.fu{
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}
.jia{
  float: right;
  margin-right: 20px;
  padding: 10px;
  width: 10px;
  height: 10px;
  line-height: 10px;
  border-radius: 50%;

  margin-top: 10px;
  color: #007aff;
  font-weight: bold;
  box-shadow: 0 0 10px #e3e3e3;
}
.zhi{
  text-align: left;
  left: 20px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 60px;
}
.payment-option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 30px;
  margin-left: 30px;
  /*border: 1px solid #ccc;*/
  width: 350px;
  height: 70px;
}
.wei{
  margin-left: 15px;
  font-weight: bold;
  font-size: 18px;
}

img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  transform: scale(1.5);
}

.payment-text {
  display: flex;
  flex-direction: column;
}

.sub-text {
  font-size: 12px;
  color: #999;
  display: inline-flex;
  margin-top: 5px;
  margin-left: 15px;
}

.dan, .dan1, .dan2{
  width: 14px;
  height: 14px;
  border: 1px solid black;
  border-radius: 50%;
  margin-left: 150px;
}
.dan1{
  margin-left: 132px;
}
.payment-option1, .payment-option2 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-top: 30px;
  width: 350px;
  height: 70px;
}

.sub-text1 {
  font-size: 16px;
  color: #999;
  display: inline-flex;
  margin-top: 5px;
  margin-left: 15px;
}
.dan2{
  margin-left: 140px;
}
.kuan{
  width: 390px;
  height: 50px;
  margin-top: 120px;
  background-color: #3473fe;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  border: none;
}
</style>